/**
 * Filename: goods_list.js
 * Author: xhh
 * Decription: 婚钻的js文件
 * Date: 2018.03.31
 */
// 入口函数
$(function () {
    // 形状选择
    $("#wedding_ring_shape_list li").on("click", function (e) {
        // 得到用户选择的形状
        var diamondShape = e.currentTarget.dataset.shape;
        // 改变样式
        $(this).toggleClass("active");
    });

    // 婚戒价格右边小方块的拖拽事件
    $("#wr_price_slider .bar1").on("mousedown",function(e){
        var $inputObj = $("#wr_min_price");
        sliderToMax($(this),e,$inputObj, 200, 4000);
    });
    // 婚戒价格左边小方块的拖拽事件
    $("#wr_price_slider .bar2").on("mousedown", function (e) {
        var $inputObj = $("#wr_max_price");
        sliderToMin($(this),e,$inputObj,200,4000);
    });
    // 钻托右边小方块的拖拽事件
    $("#drill_price_slider .bar1").on("mousedown", function (e) {
        var $inputObj = $("#drill_min_price");
        sliderToMax($(this), e, $inputObj, 200, 400);
    });
    // 钻托左边小方块的拖拽事件
    $("#drill_price_slider .bar2").on("mousedown", function (e) {
        var $inputObj = $("#drill_max_price");
        sliderToMin($(this), e, $inputObj, 200, 400);
    });

    // 婚戒最小值输入事件
    $("#wr_min_price").on("keyup", function () {
        onlyNum($(this));
    });
    // 婚戒最大值输入事件
    $("#wr_max_price").on("keyup", function () {
        onlyNum($(this));
    });
    // 钻托最小值输入事件
    $("#drill_min_price").on("keyup", function () {
        onlyNum($(this));
    });
    // 钻托最大值输入事件
    $("#drill_max_price").on("keyup", function () {
        onlyNum($(this));
    });
    // 婚戒最小值输入框失去焦点事件
    $("#wr_min_price").on("blur", function () {
        var $valObj = $("#wr_max_price");
        var $silderObj = $("#wr_price_slider");
        inputIsValid("min",$(this), $valObj, $silderObj, 200, 4000, 362);
    });
    $("#wr_max_price").on("blur", function () {
        var $valObj = $("#wr_min_price");
        var $silderObj = $("#wr_price_slider");
        inputIsValid("max",$(this),$valObj,$silderObj,200,4000,362);
    });

    // 婚戒最小值输入框失去焦点事件
    $("#drill_min_price").on("blur", function () {
        var $valObj = $("#drill_max_price");
        var $silderObj = $("#drill_price_slider");
        inputIsValid("min", $(this), $valObj, $silderObj, 200, 400, 362);
    });

    $("#drill_max_price").on("blur", function () {
        var $valObj = $("#drill_min_price");
        var $silderObj = $("#drill_price_slider");
        inputIsValid("max", $(this), $valObj, $silderObj, 200, 400, 362);
    });

    // 设计风格
    $("#wedding_ring_style li").on("click", function (e) {
        paramCheckbox(e, $(this));
    });

    /**
     * 滑向最大值
     * @param {*} that 
     * @param {*} e 
     * @param {*}  
     * @param {*} minValue 
     * @param {*} maxValue 
     */
    function sliderToMax(that, e,$inputObj,minValue,maxValue) {
        var $that = that;
        // 最小值
        var minValue = minValue;
        // 最大值
        var maxValue = maxValue;
        // 进度条实际长度
        var sliderWidth = parseInt($that.parent('.slider').css("width")) - parseInt($that.css("width"));
        // 输入框的值
        var inputvalue = minValue;
        // 距离屏幕左边距
        var leftVal = e.clientX - parseInt($that.css("left"));
        // 得到最大值小方块的left值
        var maxLeft = parseInt($that.siblings('.bar2').css("left"));
        var $that = $that;
        document.onmousemove = function (e) {
            // 设置小方块的left值
            $that.css({
                "left": (e.clientX - leftVal),
                "z-index":10
            });
            // 得到最新的left值
            var minLeft = parseInt($that.css("left"));
            // 判断当前的值是否超出范围
            if (minLeft < 0) {
                $that.css("left", 0);
                minLeft = 0;
            } else if (minLeft > maxLeft) {
                // 不能大于最大值
                $that.css({
                    "left": maxLeft,
                    "z-index":10
            });
                minLeft = maxLeft;
            }
            // 设置深色进度条的left值
            $that.siblings('.mask-slider').css("left", minLeft);
            // 计算显示值 判断是否到了最大值
            inputvalue = parseInt(minLeft * (maxValue / sliderWidth)) == 0 ? minValue : parseInt(minLeft * (maxValue / sliderWidth))
            // 输入框赋值
            $inputObj.val(inputvalue);
            window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

        };
        // 弹起鼠标不做任何操作
        document.onmouseup = function () {
            document.onmousemove = null;
        }
    }
    /**
     * 拖向最小值
     * @param {*} that 
     * @param {*} e 
     * @param {*}  
     * @param {*} minValue 
     * @param {*} maxValue 
     */
    function sliderToMin(that, e, $inputObj, minValue, maxValue) {
        var $that = that;
        var minValue = minValue;
        var maxValue = maxValue;
        var sliderWidth = parseInt($that.parent('.slider').css("width")) - parseInt($that.css("width"));
        // 输入框的值
        var inputvalue = maxValue;
        // 得到left最大值
        var maxLeft = parseInt($that.css("left"));
        // 得到左边小方块的left值
        var minLeft = parseInt($that.siblings('.bar1').css("left"));
        var leftVal = e.clientX - maxLeft;
        document.onmousemove = function (e) {
            // 得到当前的left值
            maxLeft = e.clientX - leftVal;
            // 设置小方块的right值
            $that.css({
                "right": (sliderWidth - maxLeft),
                "z-index":10
            });
            // 判断是否超出范围
            if (maxLeft < minLeft) {
                $that.css("right", (sliderWidth - minLeft));
                maxLeft = minLeft;
            } else if (maxLeft > sliderWidth) {
                $that.css("right", 0);
                maxLeft = sliderWidth;
            }
            // 设置进度条的right值
            $that.siblings('.mask-slider').css("right", (sliderWidth - maxLeft));
            // 判断是否到最小值
            inputvalue = parseInt(maxLeft * (maxValue / sliderWidth)) == 0 ? minValue : parseInt(maxLeft * (maxValue / sliderWidth));
            $inputObj.val(inputvalue);

            window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        };
        // 弹起鼠标不做任何操作
        document.onmouseup = function () {
            document.onmousemove = null;
        }
    }

    /**
     * 其他钻石参数多选
     * @param {*} that 
     * @param {*} datasetName 
     */
    function paramCheckbox(e, that) {
        var $that = that;
        $that.toggleClass("on");
        // 得到所有li元素
        var $inputObj = $that.parent().siblings("input")
        var lis = $that.parent('ul').children('li');
        // 存放选中值的数组
        var inputValArr = []
        // 遍历li判断是否选中
        lis.each(function () {
            if ($(this).hasClass("on")) {
                var val = $(this).context.dataset.wrStyle;
                // 选中的值添加到数组
                inputValArr.push(val);
            }
        });
        // 赋值给input
        $inputObj.val(inputValArr);
    }

    /**
     * 只能输入数字
     * @param {*} that 
     */
    function onlyNum(that) {
        var $that = that;
        var value = $that.val();
        if (/[^\d]/.test(value)) {
            //替换非数字字符    
            value = value.replace(/[^\d]/g, '');
            $that.val(value);
        }
    }
    /**
     * 
     * @param {*} that 
     * @param {*}  
     * @param {*}  
     * @param {*} minValue 
     * @param {*} maxValue 
     * @param {*} sliderW 
     */
    function inputIsValid(flag,that, $valObj, $silderObj, minValue, maxValue,sliderW) {
        var $that = that;
        // 输入框的值
        var inputVal = parseInt($that.val());
        if (flag === 'min') {
            // 当前最大值
            var currentMaxValue = parseInt($valObj.val());
            if (inputVal <= minValue) {
                // 是否小于最小值
                inputVal = minValue;
            } else if (inputVal > currentMaxValue) {
                // 是否大于当前最大值
                inputVal = currentMaxValue;
            } else if (inputVal > maxValue) {
                // 是否大于最大值
                inputVal = maxValue;
                $silderObj.children(".bar1").css("z-index", 11);
            }
            // 等于最小值，不做运动
            if (inputVal == minValue) {
                $silderObj.children(".bar1").animate({ "left": "0" });
                $silderObj.children(".mask-slider").animate({ "left": "0" });
            } else {
                $silderObj.children(".bar1").animate({ "left": parseInt(inputVal / (maxValue / sliderW)) });
                $silderObj.children(".mask-slider").animate({ "left": parseInt(inputVal / (maxValue / sliderW)) });
            }
        } else {
            // 当前最小值
            var currentMinValue = parseInt($valObj.val());
            if ( inputVal < minValue) {
                // 是否小于最小值
                inputVal = minValue;
            }else if (inputVal < currentMinValue) {
                // 是否大于当前最小值
                inputVal = currentMinValue;
            }else if ( inputVal >= maxValue) {
                inputVal = maxValue;
                // 是否大于等于最大值
                $silderObj.children(".bar2").animate({"right":"0"});
                $silderObj.children(".mask-slider").animate({"right":"0"});
            }
            // 动画效果
            $silderObj.children(".bar2").animate({ "right": sliderW-(parseInt(inputVal/(maxValue/sliderW))) });
            $silderObj.children(".mask-slider").animate({ "right": sliderW - (parseInt(inputVal / (maxValue / sliderW))) });
        }
        // input输入框赋值
        $that.val(inputVal);
    }

});